<template>
	<div class="best-wrap">
		<div class="layout-wrap msg-box">
			<p class="title">使用说明：</p>
			<p class="desc">根据不同项目业务发展，可在下方设置项目下的章节和知识点是否在课件上传时是否需要填写；</p>
			<div class="detail">
				<p>举例说明：</p>
				<p>项目A未开放章节/知识点时，项目A的课件在编辑时，不显示章节知识点的编写；</p>
				<p>项目B基础阶段和精讲阶段开放了章节/知识点填写，则基础阶段和精讲阶段课件需填写章节/知识点信息，其他课件资源无需填写；</p>
			</div>
		</div>
		<div class="layout-wrap content-box">
			<div v-for="item in optionsList" :key="item.theirType" class="type-item">
				<div class="msg-con">
					<p v-if="item.theirType === 'C'" class="title">章节</p>
					<p v-if="item.theirType === 'K'" class="title">知识点</p>
					<div class="detail-box">
						<div class="detail-label">是否必填：</div>
						<div class="detail-con">{{ item.isRequired === 'Y' ? '' : '非' }}必填</div>
					</div>
					<div class="detail-box">
						<div class="detail-label">开放项目：</div>
						<div class="detail-con">{{ item.projectNames }}</div>
					</div>
				</div>
				<el-button class="edit-btn" type="primary" @click="onEdit(item.theirType)">编辑</el-button>
			</div>
		</div>
		<edit-dialog
			v-if="isShowEditDialog"
			:visibly.sync="isShowEditDialog"
			:their-type="editType"
			@success="queryListData"
		/>
	</div>
</template>

<script>
	import tagApi from "@rc/apis/rc/tag.mjs";
	import EditDialog from "./components/edit-dialog.vue";

	export default {
		components: { EditDialog },
		data() {
			return {
				editType: "", // 当前编辑的类型
				isShowEditDialog: false, // 是否显示编辑弹窗
				optionsList: [] // 配置列表
			};
		},
		methods: {
			// 查询页面列表基础数据
			queryListData() {
				tagApi.queryChapterKnowledgeList({
					success: (data) => {
						this.optionsList = data;
					}
				});
			},
			// 点击编辑
			onEdit(type) {
				this.editType = type;
				this.isShowEditDialog = true;
			}
		},
		created() {
			this.queryListData();
		}
	};
</script>

<style lang="less" scoped src="./index.less"></style>
